<!DOCTYPE html>
<!--[if IE 7 ]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<meta name="description" content="">
<meta name="author" content="">

<title>MyTrack101testing</title>

<link rel="stylesheet" href="css/style.css" type="text/css"
	media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css"
	type="text/css" />

<!--[if lt IE 9]>
	    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
	window.jQuery
			|| document
					.write('<script src="js/jquery-1.6.1.min.js"><\/script>')
</script>

<script src="js/jquery.smoothscroll.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/jquery.easing-1.3.pack.js"></script>
<script src="js/jquery.fancybox-1.3.4.pack.js"></script>
<script src="js/init.js"></script>
<script
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAR33uUSrW-Nc3NWqPUZV30Anh1DOS9oto&sensor=false"
	type="text/javascript"></script>
<script type="text/javascript" src="./gmap/gmap3.min.js"></script>
<style>
body {
	text-align: center;
}

.gmap3 {
	margin: 5px auto;
	border: 1px dashed #C0C0C0;
	width: 800px;
	height: 600px;
}
</style>

<script type="text/javascript">
	/*   function initialize() {

	var latlng = new google.maps.LatLng(1.3667,103.7);
	var mapOptions = {
	  zoom: 8,
	  center: latlng,
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("test1"), mapOptions);
	
	//get json starts here
	   $.getJSON('http://mytrack101.appspot.com/data?type=map', function(data) {
		
		 $.each(data.aaData, function(i,id){
			 //adding markers start here
			var latLng = new google.maps.LatLng(id.lng, id.lat);
			 var marker = new google.maps.Marker({
			    position: latLng,
			    map: map,
			    icon:'http://maps.google.com/mapfiles/marker_green.png'

			
			  });
			 //adding markers ends here
			 
	    //show info window
	     google.maps.event.addListener(marker, 'click', function() { 
	  alert("I am marker " + marker.position); 
	}); 
	return marker;
	    //end info window
	  });

	  });
	   //get json ends here

	} */

	function initialize() {

		var latlng = new google.maps.LatLng(1.3667, 103.80);
		var mapOptions = {
			zoom : 12,
			center : latlng,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		}
		map = new google.maps.Map(document.getElementById("test1"), mapOptions);
		geocoder = new google.maps.Geocoder();

		//get json starts here
		$.getJSON('./data?type=10', function(data) {

			$.each(data.aaData, function(i, id) {
				//adding markers start here
				var latLng = new google.maps.LatLng(id.lat, id.lng);
				var marker = new google.maps.Marker({
					position : latLng,
					map : map,
					icon : 'http://maps.google.com/mapfiles/marker_green.png'

				});
				//adding markers ends here

				//show info window
				
				geocoder.geocode({'latLng':latLng}, function(results, status) {
					if (status == google.maps.GeocoderStatus.OK) {
						if (results[1]) {
							marker.info = new google.maps.InfoWindow({
								content : results[1].formatted_address + " <br> " + id.dateTime
							});
						} else {
							marker.info = new google.maps.InfoWindow({
								content : id.lat + "," +id.lng+ " <br> " + id.dateTime
							});							
						}
					} else {
						marker.info = new google.maps.InfoWindow({
							content : id.lat + ", " +id.lng + " <br> " + id.dateTime
						});						
					}
				});

				google.maps.event.addListener(marker, 'click', function() {
					marker.info.open(map, marker);
				});
				
				google.maps.event.addListener(marker, 'mouseover', function() {
					marker.info.open(map, marker);
				});

				google.maps.event.addListener(marker, 'mouseout', function() {
					marker.info.close(map, marker);
				});
				//end info window
			});

		});
		//get json ends here */

	}
</script>


</head>

<body>

	<!-- header-wrap -->
	<div id="header-wrap">
		<header>

			<hgroup>
				<h1>
					<a href="test1.html">MyTrack101</a>
				</h1>
				<h3>Tracking Makes Easy</h3>
			</hgroup>

			<nav>
				<ul>
					<li><a href="test1.html">Map</a></li>
					<li><a href="list.html">List</a></li>
					<li><a href="contact.html">Contact Us</a></li>
				</ul>
			</nav>

		</header>
	</div>
<body onload="initialize()">
	<!-- content-wrap -->
	<div class="content-wrap">

		<!-- main -->
		<section id="main">
			<div id="test1" class="gmap3"></div>
			<div id="Coordinates"></div>
			<div class="intro-box"></div>

		</section>

	</div>


</body>
</html>
